<template>
  <div style="height: 800px">

    <el-select v-model="sysMenuType" style=" width: 200px;margin: 20px;" filterable placeholder="请选择"
      @change="getTreeData">
      <el-option v-for="sysMenuType in sysMenuTypeSelectList" :key="sysMenuType.value" :label="sysMenuType.label"
        :value="sysMenuType.value">
      </el-option>

    </el-select>
    <div class="trees">
      <el-tree :data="sysMenuData" show-checkbox default-expand-all node-key="menu_id" ref="tree" highlight-current
        @node-click="handleNodeClick" :props="defaultProps">
      </el-tree>
    </div>
    <div slot="footer" style="margin-top: 50px">
      <el-button type="primary" @click="addMenu">添加菜单</el-button>
      <el-button type="info" @click="updateMenu">修改菜单</el-button>
      <el-button type="success" @click="addRoutes">添加routes</el-button>
      <el-button type="danger" @click="getTreeData">重新加载</el-button>
    </div>

    <!--将该组件的刷新数据方法传给子组件在子组件添加完成后直接对该页面进行数据刷新-->
    <update-sys-menu-form-dialog ref="update_sys_menu_form_dialog" @getTreeData="getTreeData" />
    <routes-form-dialog ref="routes_form_dialog" />
  </div>
  <TestDialog ref="qqqqqq" />
  <sys-menu-form-dialog ref="sys_menu_form_dialog" @getTreeData="getTreeData" />
</template>

<script>
import SysMenuFormDialog from "./SysMenuFormDialog.vue";
/*引入菜单form表格*/
import RoutesFormDialog from "./RoutesFormDialog";
/*引入路由form表格*/
import UpdateSysMenuFormDialog from "./UpdateSysMenuFormDialog";
import TestDialog from "./TestDialog.vue";
export default {
  name: "SysMenuTree",
  emits: ['refreshRoute'],
  components: { SysMenuFormDialog, RoutesFormDialog, UpdateSysMenuFormDialog, TestDialog },
  data() {
    return {
      sysMenuData: [],
      sysMenuTypeSelectList: [{ label: "超管", value: 1 }, { label: "用户", value: 2 }, { label: "代理商", value: 3 }],
      sysMenuType: 1,
      defaultProps: {
        children: "children",
        label: "label"
      },
      clickNode: null //点击菜单节点后将此变量赋值
    };
  },
  methods: {
    async getTreeData() {
      let me = this;
      let response = await this.$asyncPost("/sysMenu", { actionType: "sysMenuQuery", sysMenuType: me.sysMenuType });
      if (response.success) {
        me.sysMenuData = response.data;
        me.clickNode = null;//重新加载后将变量赋值为空 
      } else {
        console.log(response);
        me.$message.error(response.message);
      }
    },

    addMenu() {
      /* 获取el-tree结点本可以用自身的getCurrentNode()方法获取。
       * 之所以要用到clickNode变量是因为getCurrentNode()无法清除之前选中的结点导致无法还原currentNode的值，
       * 导致新增的菜单都添加到之前被选中的结点下。因而
       * 所以通过handNodeClick事件操作定义的clickNode变量。每次加载菜单数据时都将clickNode属性设置为空可避免这种情形。
       * 默认其为一级菜单*/
      let currentNode = this.clickNode;//为当前结点声明变量
      if (currentNode && currentNode.parent_id) {
        this.$message.warning("当前最多支持二级菜单");
        return;
      }
      let nodeMenuId = currentNode ? currentNode.menu_id : 0,
        nodeMenuPath = currentNode ? currentNode.menu_path : null;
      this.$refs.sys_menu_form_dialog.showDialog(nodeMenuId, nodeMenuPath);
    },
    updateMenu() {
      let currentNode = this.clickNode;
      if (!currentNode) return;
      let menuId = currentNode.menu_id;
      let label = currentNode.label;
      this.$refs.update_sys_menu_form_dialog.showDialog(menuId, label);
    },
    addRoutes() {
      let me = this;
      let currentNode = this.clickNode;
      if (!currentNode || currentNode.children) {
        this.$message.warning("只能对根节点设置路由");
        return;
      }
      let menuId = currentNode.menu_id;
      let menuPath = currentNode.menu_path;
      this.$refs.routes_form_dialog.showDialog(menuId, menuPath, function () {
        me.$emit("refreshRoute", menuId, me.sysMenutype);//d调用routerFormDialog，添加完成后回调用route数据刷新
      });
    },
    handleNodeClick(data) {
      let me = this;
      me.clickNode = data;//点击后为该变量赋值
      if (!data.children) {
        me.$emit("refreshRoute", data.menu_id, me.sysMenutype);
      }
    }
  },
  mounted() {
    this.getTreeData();
  }


};
</script>

<style lang="scss" scoped>
.sys-menu {
  min-height: calc(100vh);

}

.trees {
  height: 550px;
  overflow: auto;
}
</style>
